<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // var oUl = $("ul")[0];
        // 需求：点击  li变红
        // var aLi = oUl.querySelectorAll("li");
        // for (let i = 0; i < aLi.length; i++) {
        //     aLi[i].onclick = function() {
        //         console.log(this);
        //         this.style.background = "lightblue";

        //     }

        // }
        // 新增了一个li 
        // var newLi = document.createElement("li");
        // newLi.innerHTML = "newLi";
        // oUl.appendChild(newLi);
        //默认，新增的li,是没有进行 事件绑定的


        // 委托
        // 注意：将li的点击事件委托给ul
        let oUl = $("ul")[0];
        oUl.onclick = ev => {
            let lis = oUl.querySelectorAll("li");

            for (let i = 0; i < lis.length; i++) {
                lis[i].style.background = "";
            }
            if (ev.target.nodeName == 'LI') {
                ev.target.style.background = "lightblue";
            }

        }

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>